<template>
    <div style="margin-top: 75px">
        <h3>排名前7的品牌</h3>
        <div id="thisYearTop5" style="width: 100%;height:400px; margin-top: 75px;"></div>
        <h3>数据详情</h3>
        <el-row>
            <el-col :span="23" :offset="1">
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            label="排名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="brand"
                            label="品牌"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="sale"
                            label="销量（辆）"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="proportion"
                            label="占比（%）">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>



<!--        <div id="thisYearTop10" style="width: 100%;height:400px; margin-top: 75px;"></div>-->
<!--        <div id="thisYearTop15" style="width: 100%;height:400px; margin-top: 75px;"></div>-->
<!--        <div id="thisYearOther" style="width: 100%;height:400px; margin-top: 75px;"></div>-->
    </div>
</template>

<script>
    export default{
        data() {
            return {
                tableData: [],
            }
        },
        mounted() {
            this.getChart();
        },
        methods: {
            setChart(id,series) {
                let thisYear = this.$echarts.init(document.getElementById(id));
                let legend=series.map(e=>e['name'])
                let datas = series.map(e=>e['data'][0]['sale']);
                console.log(legend);
                console.log(datas);
                let option = {
                    xAxis: {
                        type: 'category',
                        data: legend,
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: datas,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(220, 220, 220, 0.8)'
                        }
                    }]
                };
                thisYear.clear();
                thisYear.setOption(option);
                window.addEventListener('resize', function () {
                    thisYear.resize()
                });
            },
            getChart() {
                this.$http({
                    url: this.$http.adornUrl(this.$route.meta['url']),
                    method: 'get',
                }).then(form => {
                    if (form.data.status == "0") {
                        let series = form.data['series'];
                        this.setChart('thisYearTop5',series.slice(0,7))
                        this.tableData=series.map(e=>e['data'][0])
                        // this.setChart('thisYearTop10',series.slice(7,14))
                        // this.setChart('thisYearTop15',series.slice(14,21))
                        // this.setChart('thisYearOther',series.slice(15))
                    } else {
                        this.$message("数据有误，请等待管理员处理")
                    }
                });
            },
        },
    }
</script>

<style scoped>

</style>
